<template>
<!-- 组件说明：
      1.组件布局：
        同第一个组件
      2.数据绑定
        没有使用options存储所有的option其余同第一个
      3.方法调用
        本组件使用两个方法，通过v-if实现根据选项不同，显示内容和方法也不同
         -->
  <div>
    <el-form ref="form" :model="form" :rules="formRules" >
        <el-row>
                  <el-col :span="12">
          <el-form-item prop="richang_age">
                        <span>请输入年龄：</span>
            <el-input v-model="form.richang_age" size="small" style="width:200px;" placeholder="请输入年龄" ></el-input>
            </el-form-item>

        </el-col>

        <el-col :span="12">
          <el-form-item prop="richang_sex">
            <span>请选择性别：</span>
            <el-select v-model="form.richang_sex" size="small" style="width:200px;;margin-left:17px" placeholder="请选择性别" >
                <el-option
                  v-for="item in sexoptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
            </el-select>
          </el-form-item>
          
        </el-col>

        </el-row>

      <el-row>
     <span>日常参数</span>
     <br><br>
        <el-col :span='12'>
        <el-form-item prop="richang_cp">
          <span>请选择经历过的胸痛类型：</span>
          <el-select v-model="form.richang_cp" size="small" style="width:200px;" placeholder="经历过的胸痛类型" >

            <el-option
              v-for="item in cpoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

      </el-col>

      <el-col :span='12'>

        <el-form-item prop="richang_exang">
            <span>用户有误详细参数：</span>
          <el-select v-model="form.richang_exang" size="small" style="width:33%;margin-left:17px" placeholder="运动引起的心绞痛" >

            <el-option
              v-for="item in exangoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>

          </el-select>

        </el-form-item>

      </el-col>
      
      </el-row>

        <span>是否有详细参数（如胆固醇等专业信息）</span>
        <br><br>
      <el-row>
        <el-col :span='6'>
          <el-select placeholder="请输入" v-model="form.is_describe" size="small" style="width:100%">
          <el-option
            v-for="item in is_describe_options"
            :key="item.value"
            :label="item.label"
            :value="item.value"></el-option>
        </el-select>
        </el-col>
        
      </el-row>

      <div>
        <div v-if="form.is_describe">
          <el-button type="submit" @click="dialog = true" style="margin-top:100px">提交</el-button>
        </div>
        <el-row>
        
        
        <!-- 提交后的表单 -->
        <div v-if="dialog">
         <el-dialog :visible.sync="dialog" title="详细参数">
           <el-form>
             <el-row>
               <span>以下详细参数，若没有则通过其他参数进行计算默认值</span>
               <br><br>
        <el-col :span='12'>

          <el-form-item prop="xiagnxi_trestbps">
            <span>静息血压:</span>
            <el-input v-model="form.xiangxi_trestbps" size="small" style="width:50%;margin-left:15px" placeholder="请输入静息血压" ></el-input>

          </el-form-item>

        </el-col>

        <el-col :span='12'>

          <el-form-item prop="xiagnxi_chol">
                      <span>胆固醇值:</span>
            <el-input v-model="form.xiangxi_chol" size="small" style="width:50%;margin-left:15px" placeholder="胆固醇测量值" ></el-input>

          </el-form-item>

        </el-col>

     </el-row>
      <el-row>

        <el-col :span="12">

         <el-form-item prop="xiangxi_oldpeak">
           <span>ST抑制:</span>
          <el-input v-model="form.xiangxi_oldpeak" size="small" style="width:50%;margin-left:15px" placeholder="ST抑制" ></el-input>

            
         </el-form-item>

      </el-col>

      <el-col :span="12">

        <el-form-item prop="xiangxi_thalach">
            <span>最大心率值:</span>
          <el-input v-model="form.xiangxi_thalach" size="small" style="width:50%;margin-left:15px" placeholder="最大心率值" ></el-input>

        </el-form-item>
        
      </el-col>

     </el-row>
      <el-row>

       <el-col :span='12'>

         <el-form-item prop="xiangxi_restecg">
           <span>静息心电值:</span>
          <el-select v-model="form.xiangxi_restecg" size="small" style="width:50%;margin-left:15px" placeholder="静息心电测量" >

            <el-option
              v-for="item in restecgoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          
      </el-form-item>

       </el-col>

       <el-col :span='12'>

         <el-form-item prop="xiangxi_slope">
           <span>最高运动ST的倾斜率：</span>
           <el-select v-model="form.xiangxi_slope" size="small"  style="width:30%;margin-left:15px" placeholder="最高运动ST的倾斜率" >

            <el-option
              v-for="item in slopeoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>

          </el-select>

         </el-form-item>

       </el-col>

     </el-row>
       <el-row>

       <el-col :span='12'>

         <el-form-item prop="xiagnxi_ca">
           <span>荧光显色的主要血管项目:</span>
          <el-select v-model="form.xiangxi_ca" size="small"  style="width:30%;margin-left:15px" placeholder="荧光显色的主要血管项目" >
            <el-option
              v-for="item in caoptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          
      </el-form-item>

       </el-col>

       <el-col :span='12'>

         <el-form-item prop="xiagnxi_thal">
           <span>地中海贫血症</span>
           <el-select v-model="form.xiangxi_thal" size="small"  style="width:50%;margin-left:15px" placeholder="地中海贫血症" >

            <el-option
              v-for="item in thaloptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>

          </el-select>

         </el-form-item>

       </el-col>

     </el-row>
           </el-form>

        <el-button type="primary" @click="open2" style="margin-left:70%">确 定</el-button>
        <el-button @click="dialog = false" style="margin-left:20px">取 消</el-button> 

         </el-dialog>

        </div>

        </el-row>  
      </div>

      <div v-if="!form.is_describe">
      <el-row>
      
      <el-button type="submit" @click="open" style="margin-top:100px">提交</el-button>

      </el-row> 
    </div>
      
          
     
    </el-form>

  </div>
</template>

<script>

import axios from 'axios'
import { Message, MessageBox } from 'element-ui'

export default {
  data(){
    return{
      dialog:false,
      data:0,
      result:0,
      form:{
        richang_age:"12",
        richang_sex:"1",
        richang_cp:"1",
        richang_exang:"1",
        xiangxi_trestbps:"123",
        xiangxi_chol:"88",
        xiangxi_restecg:"1",
        xiangxi_thalach:"120",
        xiangxi_oldpeak:"1.2",
        xiangxi_slope:"1",
        xiangxi_ca:"1",
        xiangxi_thal:"3",
        is_describe:"",
        
          
        
      },
      sexoptions:[
        {
          value: '1',
          label: '男'
        },
        {
          value: '0',
          label: '女'
        }
      ],
      cpoptions:[
        {
          value:'1',
          label:'典型心绞痛'
        },
        {
          value:'2',
          label:'非典型心绞痛'
        },
        {
          value:'3',
          label:'非心绞痛'
        },
        {
          value:'0',
          label:'无症状'
        }
      ],
      exangoptions:[
        {
          value:"1",
          label:"有过"
        },
        {
          value:"0",
          label:"没有"
        },
      ],
     
      restecgoptions:[
        {
          value:"0",
          label:"正常"
        },
        {
          value:"1",
          label:"ST-T波异常"
        },
        {
          value:"2",
          label:"可能或确定的左心室肥大"
        },
      ],
      slopeoptions:[
        {
          value:"1",
          label:"上坡"
        },
        {
          value:"2",
          label:"平坦"
        },
        {
          value:"3",
          label:"下坡"
        },
      ],
      caoptions:[
        {
          value:"1",
          label:"1"
        },
        {
          value:"2",
          label:"2"
        },
        {
          value:"3",
          label:"3"
        },
      ],
      thaloptions:[
        {
          value:"3",
          label:"正常"
        },
        {
          value:"6",
          label:"固定缺陷"
        },
        {
          value:"7",
          label:"可逆缺陷"
        },
      ],
      is_describe_options:[
        {
          value:0,
          label:'没有'
        },
        {
          value:1,
          label:'有'
        },
      ],
      formRules:{
        richang_age:[
          { required: true, message: '请输入', trigger: 'blur' },
          { min: 1, max: 2, message: '年龄不超过100', trigger: 'blur' }
        ],
        richang_sex:[
          { required: true, message: '请选择', trigger: 'blur' },
        ],
        xiagnxi_cp:[
          { required: true, message: '请选择', trigger: 'blur' },
        ],
        xiagnxi_exang:[
          { required: true, message: '请选择', trigger: 'blur' },
        ],
        xiagnxi_trestbps:[
          { required: true, message: '请输入', trigger: 'blur' },
          { min: 2, max: 3, message: '血压在94-200', trigger: 'blur' }
        ],
        xiagnxi_chol:[
          { required: true, message: '请输入', trigger: 'blur' },
          {pattern:'[1][2][6-9]|[1][3-9][0-9]|[2-4][0-8][0-9]|[5][0-5][0-9]|[5][6][0-4]',
           message: '胆固醇在126-564', trigger: 'blur'}
        ],
        xiagnxi_oldpeak:[
          { required: true, message: '请输入', trigger: 'blur' },
          { pattern:'[0-5][.][0-9]|[6][.][0-2]|[0-6]', message: '胆固醇在0-6.2', trigger: 'blur' }
        ],
        xiagnxi_thalach:[
          { required: true, message: '请输入', trigger: 'blur' },
          { pattern:'[7][1-9]|[8-9][0-9]|[1][0-9][0-9]|[2][0-1][0-9]|[2][2][0]',
            message: '心率值在71-220', trigger: 'blur' }
        ],
        xiagnxi_restecg:[
          { required: true, message: '请选择', trigger: 'blur' }
        ],
        xiagnxi_slope:[
          { required: true, message: '请选择', trigger: 'blur' }
        ],
        xiagnxi_ca:[
          { required: true, message: '请选择', trigger: 'blur' }
        ],
        xiagnxi_thal:[
          { required: true, message: '请选择', trigger: 'blur' }
        ]

      }
    }
  },
  methods:{
     
      open() {
        MessageBox.confirm('请提交前确认已经填写好所有数据', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          Message.success("提交成功!")
      
              await axios.post('/api/23post',
              JSON.stringify(this.form),
              console.log("传输的数据是"),
              console.log(this.form)
            )
            .then(
               () =>{
                 axios.get('/api/23get')
                .then(
                  Response =>{
                    
                    
                    if (Response.data == 1 ){
                      this.$router.push('/heart_result1')
                    }
                    if (Response.data == 0 ){
                      this.$router.push('/heart_result0')
                    }
                  }
                )
          
              }
             
            )
            .catch(function (error) {
              console.log(error);
            })
            
        }).catch(() => {
          Message.info("已取消提交")
               
        });
      },
      open2() {
        MessageBox.confirm('请提交前确认已经填写好所有数据', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          Message.success("提交成功!")
          this.dialog = false
      
              await axios.post('/api/23post',
              JSON.stringify(this.form),
            )
            .then(
               () =>{
                 axios.get('/api/23get')
                .then(
                  Response =>{
                    if (Response.data == 1 ){
                      this.$router.push('/heart_result1')
                    }
                    if (Response.data == 0 ){
                      this.$router.push('/heart_result0')
                    }
                  }
                )
          
              }
             
            )
            .catch(function (error) {
              console.log(error);
            })
            
        }).catch(() => {
          Message.info("已取消提交")
               
        });
      }

  },

}
</script>

<style>
.el-input__inner{
  width: 20%;
}

</style>